<template>
  <input
    @change="verifyFn"
    class="hemaInp"
    :[text]="{ success: flag, err: !flag }"
    :value="value"
    @input="changFn"
  />
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      text: "",
    };
  },
  created() {
    if (this.reg.test(this.value)) {
      this.flag = true;
    } else {
      this.flag = false;
    }
  },
  props: {
    value: {
      type: String,
    },
    reg: {
      type: RegExp,
    },
  },
  methods: {
    verifyFn() {
      this.text = "class";
      if (this.reg.test(this.value)) {
        this.flag = true;
      } else {
        this.$toast.fail("信息填写错误");
        this.flag = false;
      }
    },
    changFn(e) {
      // console.log(e.target.value);
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style>
.hemaInp {
  border: none;
  border-bottom: 2px solid #ddd;
  width: 100%;
  padding: 10px;
}
.success {
  color: green;
  border-bottom: 2px solid green;
}
.err {
  color: red;
  border-bottom: 2px solid red;
}
</style>